<template>
<div>
    
    <ul  v-for = "item in reyingList" :key="item.id">
        <router-link :to="'/item/'+item.id" class="list1">
        <li ><img :src="item.img" /></li>
        <li>
            <p class="p1">
               {{item.nm}}
                <span class="imax2d" v-if="item.version=='v2d imax'"></span>
                <span class="imax3d" v-else-if="item.version=='v3d imax'"></span>
                 </p>
            <p>观众评 <i style="color:#faaf00;font-weight: bold; font-size: 16px;">{{item.sc}}</i></p>
            <p class="p3">主演：{{item.star}}</p>
            <p>{{item.showInfo}}</p>


        </li>
        <li>
            <button v-if="item.globalReleased" class="gpc">购票</button>
            <button v-else class="ysc">预售</button>
        </li>
         </router-link>
    </ul>
   
</div>
  
</template>

<script >
export default {
    name:'Hot',
    props:['reyingList'],
    data(){
        return{};
    },
    methods:{},
    components:{},
}
</script>

<style>
*{
    
    margin: 0;
    padding:0;
    list-style: none;
}
.list1{
    /* margin-top: -.5rem; */
    /* border-top: 1px solid #000; */
    width: 100%;
    display: flex;
    height: 3.2rem;
    border-bottom: 1px solid #ccc;
    /* margin-bottom: 50px; */
    

    
}
.list1 li:nth-child(1){
    width: 20%;
    /* border: 1px solid red; */
    height: 3rem;
}

.list1 li:nth-child(1) img{
    width: 1.706667rem;
    /* border: 1px solid red; */
    height: 2.4rem;
    margin-top: .266667rem;
    
}
.list1 li:nth-child(2){
    width: 60%;
    height: 3rem;
    /* border: 1px solid red; */

}
.list1 li:nth-child(2) p{
    width: 80%;
    text-align: left;
    /* border: 1px solid red; */
    margin-top: .133333rem;


}
.list1 li:nth-child(2) .p1{
    margin-top: .266667rem;
    font-size: 16px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
   

}
/* .list1 li:nth-child(2) .p1> .span3{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
} */
 
.list1 li:nth-child(3){
    width: 15%;
    height: 3rem;
    /* border: 1px solid red; */
    /* line-height: 3rem; */

}
.p3{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.gpc{
    width: 1.253333rem;
    height: .72rem;
    border-radius: .133333rem;
    border: #f03d37;
    background: #f03d37;
    color:#fff;
    margin-top: 1rem;

}
.ysc{
    width: 1.253333rem;
    height: .72rem;
    border-radius: .133333rem;
    border: #3c9fe6;
    background: #3c9fe6;
    color:#fff;
    margin-top: 1rem;

}
.imax2d{
    display: inline-block;
    height: .37rem;
    width: 1.15rem;
    background: url();
    background-size: cover;
}
.imax3d{
    display: inline-block;
    height: .37rem;
    width: 1.15rem;
    background:url();
    background-size: cover;
}
a{
    color: #000;
}
</style>